<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Mootools MochaUI - Fixed Width with Dock</title>

	<link rel="stylesheet" href="css/content.css" type="text/css" />
	<link rel="stylesheet" href="css/ui.css" type="text/css" />
	<script type="text/javascript" src="scripts/mootools-1.2-core.js"></script>
	<script type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
	<!--[if IE]>
		<script type="text/javascript" src="scripts/excanvas-compressed.js"></script>
	<![endif]-->
	<script type="text/javascript" src="scripts/source/Utilities/mocha.js.php"></script>

	<!-- <script type="text/javascript" src="scripts/mocha.js" charset="utf-8"></script> -->

	<script type="text/javascript">
	
	MochaUI.aboutWindow = function(){
		new MochaUI.Window({
			id: 'about',
			title: 'MochaUI',
			loadMethod: 'xhr',
			contentURL: 'pages/about.html',
			type: 'modal2',
			width: 350,
			height: 195,
			contentBgColor: '#e5e5e5 url(images/logo2.gif) left 3px no-repeat',
			padding: { top: 43, right: 12, bottom: 10, left: 12 },
			scrollbars:  false
		});
	}}	

	window.addEvent('domready', function(){
		MochaUI.Desktop = new MochaUI.Desktop();
		MochaUI.Dock = new MochaUI.Dock({
			dockPosition: 'bottom'
		});
		MochaUI.Modal = new MochaUI.Modal();
		MochaUI.NewWindowsFromHTML = new MochaUI.NewWindowsFromHTML();

		$('aboutLink').addEvent('click', function(e){
			new Event(e).stop();
			MochaUI.aboutWindow();
		});

	});
	</script>


<style>	

#desktop {
	visibility: visible;
}

#pageWrapper {
	overflow: auto;
	background: #7c9dbf;
	border: 0;	
}

#page {
	margin: 0 auto 0;
	width: 800px;
	background: #fff;	
}

#header {
	background: #f0f0f0;
	padding: 20px;	
}

#navigation {
	background: #f5f5f5;
	padding: 5px 20px;	
}

#content {
	padding: 20px;
}

#footer {
	background: #f0f0f0;
	padding: 10px 20px;
}

#dockWrapper {
	border-top: 1px solid #999;
	border-bottom: 0;
}

#dockWrapper.top {
	border-top: 0;
	border-bottom: 1px solid #999;
}

</style>

</head>
<body>

<div id="desktop">
	
<div id="dockWrapper">
	<div id="dock">
		<div id="dockPlacement"></div>
		<div id="dockAutoHide"></div>
		<div id="dockSort"><div id="dockClear" class="clear"></div></div>
	</div>
</div>	

<div id="pageWrapper">
	<div id="page">
	
		<!-- PAGE CONTENT BEGINS HERE -->

		<div id="header">
			<h1>My Website</h1>
		</div>
		
		<div id="navigation">
			Site menu
		</div>			

		<div id="content">	
			<h3>My Page Content</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p><a id="aboutLink" href="pages/about.html">Modal Test</a></p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

		</div><!-- content end -->

		<div id="footer">
			Footer text
		</div>

	<!-- PAGE CONTENT ENDS HERE -->
	</div><!-- page end -->
</div><!-- pageWrapper end -->

<div class="mocha" id="myWindow01" style="width:300px;height:255px;top:90px;left:350px">
	<h3 class="mochaTitle">My Window 01</h3>
	<p>My Window Content</p>
</div>

<div class="mocha" id="myWindow02" style="width:300px;height:275px;top:160px;left:420px">
	<h3 class="mochaTitle">My Window 02</h3>
	<p>My Window Content</p>
</div>

<div class="mocha" id="myWindow03" style="width:300px;height:105px;top:230px;left:490px">
	<h3 class="mochaTitle">My Window 03</h3>
	<p>My Window Content</p>
</div>

</div><!-- desktop end -->

</body>
</html>